<template>
  <div ref="root_node"
       class="wait-end-game">
  </div>
</template>
<script>
import {
  ROOM_STATUS,
  PLAYER_STATUS,
  roomStatusToString,
  playerStatusToString,
} from '../../STATUS';
import render_player, { init_loader as render_player_init_loader } from './render_player';
import { stageComponentGenerator } from '../../core/componentGenerator';
export default stageComponentGenerator({
  name: 'wait-end-game',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created() {
    const {
      unwatchers,
      app,
      loader
    } = this;
    render_player_init_loader(loader);

    loader.onError.add(err => console.error(err))
    this.draw_app = async () => {
      console.log("DRAW WAITGAMER");
      const loader = this.loader;
      if (!loader) {// maybe run on after destroyed
        return
      }
      this.clearWatch();
      const resources = loader.resources;
      app.stage.destroy();
      const stage = app.stage = new PIXI.Container();
      const {
        width,
        height
      } = app.renderer;
      const bg = new PIXI.Sprite(resources.bg.texture);
      bg.width = width;
      bg.height = height;
      stage.addChild(bg);

      const {
        avatar_box_bounds,
        $cur_player
      } = await render_player.call(this, {
          app,
          stage,
          resources,
          width,
          height,
          unwatchers,
        });

      // 显示自身状态
      $cur_player.showStatus();

      const info_font_size = Math.min(width / 20, height / 20);
      const $info = new PIXI.Text("等待其它玩家完成", {
        fontSize: info_font_size,
        fill: 0xFFFFFF,
        strokeThickness: info_font_size / 5,
        stroke: 0xf0780d
      });
      $info.x = width / 2 - $info.width / 2;
      $info.y = height / 2 - $info.height / 2;
      stage.addChild($info);
    }
  },
  methods: { playerStatusToString }
})
</script>
<style>
.wait-end-game {
  width: 100%;
  height: 100%;
}
</style>